import React, { useState } from 'react'
import SwitchItem from './../../newsComponents/SwitchItem'
import Header from './../../newsComponents/news-header'
import { ImagePicker } from "antd-mobile"
import './index.scss'

export default function StartGruopChatSetting(props) {
  const [files, setFiles] = useState([])

  const onChange = (files, type, index) => {
    console.log(files, type, index);
    setFiles(files)
  }

  const onClickHandle = (checked) => {
    console.log(checked)
  }
  return (
    <>
      <div className="container">
        <Header props={props} title='基本资料' rightTitle="完成" />
        <div className="content startGroupCHat-setting-content">
          {/* 群聊名称 */}
          <div className="startGroupCHat-setting-content_groupname">
            <p className="p">群聊名称 <span style={{ color: 'red' }}>*</span></p>
            <input className="edit" placeholder="请输入群聊名称（10个字符以内）" />
          </div>
          {/* 群聊头像 */}
          <div className="startGroupCHat-setting-content_groupavatar">
            <p className="p">群聊头像 </p>


            <ImagePicker
              length={1}
              files={files}
              onChange={onChange}
              onImageClick={(index, fs) => console.log(index, fs)}
              selectable={files.length < 1}

            />
          </div>


          <SwitchItem checked onClickHandle={onClickHandle}>
            聊天置顶
          </SwitchItem>
          <SwitchItem checked onClickHandle={onClickHandle}>
            消息免打扰
          </SwitchItem>
          <SwitchItem checked onClickHandle={onClickHandle}>
            允许通过搜索加入
          </SwitchItem>
        </div>

      </div>
    </>
  )
}